<script setup lang="ts">
import {type ColProps, TableRowSelection, TableColumn} from "@arco-design/web-vue";
import {reactive, ref} from "vue";
import {tableBorder} from "@/utils/border/table-border.ts";

const colProps: ColProps = {
  xs: 24,
  sm: 24,
  md: 12,
  lg: 6,
  xl: 6,
  xxl: 6,
  span: 6
}

const rowSelection: TableRowSelection = {
  type: "checkbox",
  showCheckedAll: true,
  onlyCurrent: false,
};

const loading = reactive({
  search: false,            // 查询按钮的 Loading
  reset: false,             // 重置按钮的 Loading
  import: false,            // 导入按钮的 Loading
  export: false,            // 导出按钮的 Loading
  downloadTemplate: false,  // 裁判模板下载按钮的 Loading
  print: false,             // 打印按钮的 Loading
  batchDelete: false,       // 批量删除的 Loading
  deleteAll: false,         // 全部删除的 Loading
  table: false
})

const selectedKeys = ref<string[]>([]);

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showTotal: true,
})

const data = ref([])
// 查询
const handleSearch = () => {}
// 重置
const handleReset = () => {}
// 添加
const handleAdd = () => {}
// 批量删除
const handleBatchDelete = () => {}
// 全部删除
const handleAllDelete = () => {}
// 导入
const handleImport = () => {}
// 导出
const handleExport = () => {}
// 模板下载
const handleDownloadTemplate = () => {}
// 打印
const handlePrint = () => {}
// 分页
const handlePageChange = () => {}

const columns: TableColumn[] = [
  {
    title: "#",
    key: "deskNo",
    dataIndex: "deskNo",
    align: "center",
    width: 160,
  },
  {
    title: "裁判姓名",
    key: "paperNo",
    dataIndex: "paperNo",
    align: "center",
    // width: 160,
  },
  {
    title: "密码",
    key: "score",
    dataIndex: "score",
    align: "center",
    // width: 160,
  },
  {
    title: "操作",
    slotName: "operate",
    align: "center",
    width: 160,
    fixed: "right",
  },
]
</script>

<template>
  <a-space
      class="container"
      direction="vertical"
  >
    <a-card>
      <a-form>
        <a-row :gutter="24">
          <a-col v-bind="colProps">
            <a-form-item label="裁判姓名">
              <a-input allow-clear/>
            </a-form-item>
          </a-col>
          <a-col v-bind="colProps">
            <a-form-item :label-col-props="{span: 0}">
              <a-space>
                <a-button
                    type="primary"
                    @click="handleSearch"
                    :loading="loading.search"
                >
                  <template #icon>
                    <icon-search />
                  </template>
                  <span>查询</span>
                </a-button>
                <a-button
                    @click="handleReset"
                    :loading="loading.reset"
                >
                  <template #icon>
                    <icon-refresh />
                  </template>
                  <span>重置</span>
                </a-button>
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card>
      <div class="tabletools">
        <a-space>
          <a-button
              type="outline"
              @click="handleAdd"
          >新增</a-button>
          <a-button
              type="outline"
              :loading="loading.batchDelete"
              status="danger"
              @click="handleBatchDelete"
          >批量删除</a-button>
          <a-button
              type="outline"
              :loading="loading.deleteAll"
              status="danger"
              @click="handleAllDelete"
          >全部删除</a-button>
          <a-button
              type="outline"
              @click="handleImport"
              :loading="loading.import"
          >导入</a-button>
          <a-button
              type="outline"
              @click="handleExport"
              :loading="loading.export"
          >导出</a-button>
          <a-button
              type="outline"
              @click="handleDownloadTemplate"
              :loading="loading.downloadTemplate"
          >裁判模板下载</a-button>
          <a-button
              type="outline"
              @click="handlePrint"
              :loading="loading.print"
          >打印</a-button>
        </a-space>
      </div>
      <a-table
          row-key="id"
          :loading="loading.table"
          :data="data"
          :columns="columns"
          :bordered="tableBorder"
          :pagination="pagination"
          @page-change="handlePageChange"
          :row-selection="rowSelection"
          v-model:selected-keys="selectedKeys"
      ></a-table>
    </a-card>
  </a-space>
</template>

<style scoped lang="scss">

</style>